<template>
  <view w-full box-border pa-20rpx>
    <xm-swiper
      ref="swiperRef"
      v-model="curQuestionIndex"
      :items="questions"
      :height="questionHeight"
      :style="{ height: questionHeight + 'px' }">
      <template #default="{ item: question }">
        <scroll-view
          scroll-y
          enhanced
          :show-scrollbar="false"
          :style="{ height: questionHeight + 'px' }"
          bg-white
          rounded-20rpx
          px-20rpx
          py-30rpx
          box-border>
          <xm-question
            v-model="question.userAnswers"
            :type="question.type"
            :markType="question.markType"
            :title="question.title"
            :score="question.score"
            :answers="question.answers"
            :userScore="question.userScore"
            :options="question.options"
            :analysis="question.analysis"
            :editable="exering(question)"
            :analysisShow="analysisShow(question)"
            :answerShow="false">
            <template #title-pre>
              <text class="mypaper-main__question-cur-no">{{ question?.no }}、【{{ typeDict[question.type] }}】</text>
            </template>
            <template #title-post>
              <text>（{{ question?.score }}分）</text>
            </template>
          </xm-question>
        </scroll-view>
      </template>
    </xm-swiper>
  </view>
  <view
    bg-white
    rounded-20rpx
    ml-20rpx
    w-710rpx
    h-120rpx
    flex
    justify-between
    items-center
    position-fixed
    bottom-46rpx
    px-20rpx
    box-border>
    <view
      w-200rpx
      h-80rpx
      bg="#FF7654"
      rounded-40rpx
      flex
      justify-center
      items-center
      mr-28rpx
      @click="rmeoveErrQuestion">
      移除
    </view>
    <view flex justify-end items-center text-28rpx>
      <view
        w-200rpx
        h-80rpx
        bg="#FCC300"
        rounded-40rpx
        flex
        justify-center
        items-center
        mr-28rpx
        @click="swiperRef.pre()">
        上一题
      </view>
      <view w-200rpx h-80rpx bg="#FCC300" rounded-40rpx flex justify-center items-center @click="swiperRef.next()">
        下一题
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onLoad, onShow } from '@dcloudio/uni-app'
import { selectErrorQuestion, deleteErrorQuestion } from '@/api/examRecord'
import xmSwiper from '@/pages/exam/components/xm-swiper/xm-swiper.vue'
import xmQuestion from '@/pages/exam/components/xm-question/xm-question.vue'
import type { Question } from '@/ts/question.d.ts'

const swiperRef = ref() // 滑块索引
const questions = ref<Question[]>([{} as Question]) // 试题列表
const answerModel = ref(1) // 答题模式（1：答题；2：背题）
const curQuestionIndex = ref<number>(0) // 当前试题索引
const id = ref<string | number>('')
const type = ref<number>(1) // 1专题;2其他

//试题类型（1：单选；2：多选；3：填空；4：判断；5：问答）
const typeDict = ref<any>({
  1: '单选',
  2: '多选',
  3: '填空',
  4: '判断',
  5: '问答'
})

const exering = computed(() => (question: Question) => answerModel.value === 1 && question.userScore == null) // 练习中
const analysisShow = computed(() => (question: Question) => answerModel.value === 2 || question.userScore != null) // 解析显示

// 试题滚动高度
const questionHeight = computed(() => {
  const systemInfo: any = uni.getSystemInfoSync()
  return systemInfo.windowHeight - (systemInfo.screenWidth / 750) * 206
})

// 试题查询
async function questionQuery() {
  const response = await selectErrorQuestion()
  if (response.data.result.length === 0) {
    uni.showToast({ title: '没有错题！', icon: 'none' })
    uni.navigateBack()
    return
  }
  questions.value = (response.data.result as any[]).map((question: Question, index) => {
    question.no = index + 1
    question.userScore = 987654 // 接口没有，填充
    return question
  })
}

function rmeoveErrQuestion() {
  let curQuestion = questions.value[curQuestionIndex.value]
  console.log('删除错题', curQuestion)

  deleteErrorQuestion(curQuestion.id).then(() => {
    uni.showToast({ title: '删除成功！', icon: 'none' })
    questionQuery()
  })
}

onMounted(() => {})
onLoad((options: any) => {
  id.value = options.id
  if (options.type) {
    type.value = parseInt(options.type)
  }

  questionQuery()
})
</script>
<style>
page {
}
</style>
<style scoped lang="scss">
// #ifdef MP-WEIXIN
:deep(swiper) {
  height: 100%;
  swiper-item {
    & > view {
      height: 100%;
    }
  }
}
// #endif
</style>
